@import '../../../../assets/css/modalBox.styl'
.realTimeDataClass,.BIWRAP
	width: 100%
	.right_header
		.listName
			flex 0 0 450px !important
		.right_header_time
			margin-top 7px
			flex 1
			.block
				display flex
				span
					color rgb(191, 203, 217)
					font-size: 16px;
					font-weight: 400;
					line-height: 20px;
					margin-top 10px
			.el-input
				margin-top 5px
				width 150px !important
				margin-right 10px
		.el-input__inner
			background none
			color #bfcbd9
		.choose_plat
			flex: 0 0 350px
			// margin-top: 13px
			.el-menu--dark
				background none
				&:hover
					background none
			.el-menu-item
				background none
				border none
				height 24px
				line-height 22px
				border-radius: 4px
				margin-right 10px
				margin-top 13px
				padding: 0 10px
				&:hover
					border-bottom-width: 3px !important;
	.shade,.projectNavList
			@extend $.modalBoxWrap
			.shadeChoose
				@extend $.modalBox
				width 700px
				.vicp-close
					@extend $.vicp-close
					.vicp-icon4
						@extend $.vicp-icon4
			.channelsChoose,.serversChoose,.sureBtn
				border 1px dashed rgba(0, 0, 0, 0.08)
				background-color: rgba(0, 0, 0, 0.03)
				padding 0 20px
				.chinnelSwitch,.serverSwitch
					padding 10px
					overflow hidden
					font-weight bold
					margin 0 auto
					border-bottom 1px dashed #b7bfc3
					.switch
						float left
						line-height 24px
						margin-right 10px
					.chooseEnd 
						float right
						line-height 20px
						span
							font-weight bold
							line-height 24px
					.el-switch
						float left
						margin-right 10px
				.chinnelRadio
					margin 10px
					.filter
						overflow hidden
						.el-button
							float right
							margin-left 10px
						.el-input 
							width 200px
							float left
							input
								width 200px
					.el-radio-group
						margin-top 10px
						flex-flow: row wrap
						justify-content: flex-start
						line-height: 40px
						max-height 100px
						overflow-y scroll
						border-bottom 1px dashed #b7bfc3
						.el-radio
							margin-left 0
							margin-right 10px
							width 135px
					.afterChoose
						font-size 12px
						margin-top 10px
			.serversChoose
				margin-top 15px
			.sureBtn
				text-align center
				margin-top 10px
				padding 10px
	.right_content
		width: 98%
		padding:15px 1%
		.details
			display: flex
			height: 150px
			li		
				height: 100%
				flex: 1
				margin: 0 10px
				text-align:center
				overflow: auto	
				&:nth-of-type(1)
					margin-left: 0
					border: 1px solid #f33d2c 
					color:#f33d2c	
				&:nth-of-type(2)
					border: 1px solid #34495E ;
					color: #34495e;
				&:nth-of-type(3)
					border: 1px solid #47a947 ;
					color: #47a947
				&:nth-of-type(4)
					border: 1px solid #f9af3f ;
					color: #f9af3f;
				&:nth-of-type(5)
					border: 1px solid #2dc9b7 ;
					color: #2dc9b7;
				&:nth-of-type(6)
					border: 1px solid #50bfff ;
					color: #50bfff;
					margin-right: 0;	
				.right_content_intro_icon
					width: 60px
					height: 60px
					background: #f33d2c
					border-radius: 50%
					display: inline-block
					opacity: 0.8
					cursor: pointer
					position:relative
					top:10px
					i
						font-size: 50px
						color:#fff !important
						display: block
						margin: 5px
				>p
					vertical-align: middle;
					display: inline-block;
					font-size: 20px;
					>span
						font-weight: bold;
						line-height: 22px;
					.right_content_intro
						font-size: 12px;
				.visible
						height: 98%;
						vertical-align: middle;
						width: 0;
						display: inline-block;
		.listChart1,.listChart2,.listChart3
			width 100%
			margin-top 10px 
			overflow hidden
			position relative
			.listChart1_title
				color: #bfcbd9;
				font-size: 14px;
				background:#324157;
				width: 100%;
				height: 40px;
				p
					// width: 80%;
					float: left;
					line-height: 40px;
					margin-left: 10px;
				.chart1-introduce
					float: right
					margin-right: 10px
					i
						line-height: 40px;
						&:hover
							color:#20a0ff;
							transition:all .3s ease;
			.el-loading-spinner
				margin-top -78px
		.realTimeData
			width: 100%;
			height: 350px;
			box-sizing:border-box;
			border:1px solid #e8ebed;
		.newAccount,.payMoney,.charts,.activeAccount
			width: 100%;
			height: 330px;
		.el-table 
			.cell
				line-height 16px
			.el-progress-bar__innerText
				color #000
			.grogressSpan
				position absolute
				right 20px
				z-index 1000
		.el-collapse
			.el-button
				float right
				margin-top 10px
				margin-right 10px
@media screen and (max-width: 1570px)
	.realTimeDataClass
		width: 100%
		.right_header
			.listName
				flex 0 0 150px !important
				.title1
					display: none
		.right_content
			.details
				li
					.right_content_intro_icon
						display none
					p
						font-size  10px
				// :last-child
				// 	p
				// 		height 100px